<template>
  <n-modal v-model:show="visible" preset="dialog" :mask-closable="false"
    style="width: 40em">
        <template #header>
          <div> 选择角色 </div>
        </template>

        <div>
          <RoleComponent ref="roleCompoenent" :isModalComponent="true"></RoleComponent>
          <div class="ops"> 
            <label class="tip"> 先选择，再保存 </label>
            <n-button type="info" @click="addRole()"> 选择 </n-button>
          </div>
      
          <div class="head">
            <label>已选择：</label>
            <n-tag type="info" v-for="r,index in roles" :key="index"  
                closable @close="deleteRole(index)">
                {{r.name}}
            </n-tag>
          </div>
          
          <n-divider />
        </div>

        <template #action>
          <!-- <label style="margin-top: 20px;"> -->
            <n-button type="primary" @click="saveRole()" :disabled="roleDialog.saving"> 保存角色 </n-button>
            <n-button type="warning" @click="closeRole()" :disabled="roleDialog.saving"> 取消 </n-button>
          <!-- </label> -->
        </template>
  </n-modal>

</template>

<script>
import { NTag, NDivider } from "naive-ui" 
import RoleComponent from '../role/role.vue'

export default {
  name: 'UserRoleSelector',
  components: {
    NTag, NDivider, RoleComponent, 
  },
  inject: [ "Message" ],
  props: {
      // 选中后关闭的回调函数， 参数：(users, resolve)，users-选中的用户， resolve-调用后正常关闭弹窗
      selected: {
        type: Function, default: () => null
      },
      // 最大选中数量
      maxSelect: { type: Number, default: () => null },
  },
  data() {
    return {
      // 已选择的角色
      roles: [],

      visible: false,
    }
  },

  methods: {
      empty() { },
      // 添加选择的角色
      addRole() {
        if(!this.roles) {
          this.roles = []
        }

        let sels =  this.$refs.roleCompoenent.listSelectedDatas()
        //console.log("sels", sels)
        if( !sels || sels.length==0) {
          return
        }
        if(this.maxSelect && this.users.length >= this.maxSelect) {
            if(this.maxSelect == 1){
              this.Message.warning("只能选择1个")
            } else {
              this.Message.warning("最多选择 " + this.maxSelect + "个")
            }
            return
        }

        let code_yet = this.roles.map(e => e.roleCode)
        let newSel = sels.filter(e => code_yet.indexOf(e.roleCode) == -1)
        if(newSel && newSel.length>0) {
          this.roles = this.roles.concat(newSel)
        }
        // console.log("this.roles", this.roles)
      },
      
      // 删除角色
      deleteRole(index) {
        this.roles.splice(index, 1)
      },
      
      // 父组件获取选择的角色
      getRoles() {
        return this.roles
      },
      // 设置已选择的角色
      setRoles(newRoles){
        this.roles = newRoles
      },

      // 显示弹窗
      show() {
        this.roles = []
        this.visible = true
      },
      // 关闭弹窗
      close() {
        this.roles = []
        this.visible = false
      },
      comfirm() {
        if(!this.selected) {
          console.warn("未设置处理函数")
          return
        }
        this.selected(this.users, this.close)
      }

  }
}
</script>

<style lang="scss" scoped>
.head{
  label{
    font-size: 1.1rem;
    color: #2c9511;
  }
  .n-tag{
    margin: 0px 2px;
  }
}
.ops{
  margin-top: 40px;
  text-align:right;

  .tip{
    color: #a90909d1;
  }
}
</style>
